<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>OpenVPN Management</title>
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
  <link type="text/css" rel="stylesheet" href="/static/layui/css/layui.css">
  <link type="text/css" rel="stylesheet" href="/static/css/index.css">
</head>
<body class="layui-layout-body">
<div class="layui-row">
    <div class="layui-col-md4">
        <span>&nbsp;</span>
    </div>
    <div class="layui-col-md4">
        <div class="layui-row">
            <div class="layui-col-md12 login-title">
                <span> OpenVPN Management</span>
            </div>
        </div>
        <br />
        <div class="layui-row">
            <div class="layui-col-md12 layui-inline">
                <form id="add_form" class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" placeholder="请输入" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" placeholder="请输入" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-submit">
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button class="layui-btn" lay-submit lay-filter="*">登陆</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <span>&nbsp;</span>
    </div>
</div>

<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/hashes.min.js"></script>
<script type="text/javascript" src="/static/js/cookie.js"></script>
<script>
var host = window.location.host;

layui.use(['jquery', 'form'], function() {
    var $ = layui.$;
    var form = layui.form;
    var base64 = new Hashes.Base64;
    var MD5 = new Hashes.MD5;

    $.ajaxPrefilter(function(options, originalOptions, jqXHR){
        if ( options.type === "POST") {
            options.data = base64.encode(options.data);
        }
    });

    form.on('submit(*)', function(formdata) {
        data = {}
        data.username = formdata.field.username;
        data.password = MD5.hex(formdata.field.password);
        $.ajax({
            type: "POST",
            url: "/login",
            async: false,
            contentType: "application/json",
            dataType: "json",
            processData: true,
            data: JSON.stringify(data),
            success: function(resp, textStatus, jsxhr){
                if (resp.code === 0) {
                    layer.msg(resp.result, {time: 1000, icon: 1});
                    Cookies.set("username", data.username, {expires: 1});
                    Cookies.set("token", resp.token.trim());
                    location.replace("/");
                } else {
                    layer.msg(resp.result, {time: 1000, icon: 5});
                }
            },
            error: function(resp, textStatus){
                layer.msg(resp.responseText, {time: 1000, icon: 5});
            },
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});
</script>
</body>
</html>